<script setup>
import {ref} from "vue";

const {commentViewList, total, handleCurrentChange} = defineProps({
  commentViewList: Array,
  total: Number,
  handleCurrentChange: Function,
  showMoreReplies: Function,
  doReply: Function,
  doLike: Function,
  renderContent: Function,
})
const PageSize = 5;
const LikeType = {
  comment: 0,
  reply: 1
}
const ReplyPageSize = 10;
const replyPageNum = ref(1);
</script>

<template>
  <div class="reply-wrapper">
    <div class="wrapper-header">
      <div class="title-header">全部讨论</div>
    </div>
    <div class="wrapper-body">
      <div class="reply-list">
        <div class="reply-item" v-for="commentItem in commentViewList" :key="commentItem.id">
          <div class="root-reply-container">
            <div class="root-reply-avatar">
              <div class="firstName-avatar">
                <span>{{ commentItem.unickname?.charAt(0) }}</span>
              </div>
            </div>
            <div class="content-wrap">
              <div class="nickname">{{ commentItem.unickname }}</div>
              <div class="reply-content">
                <div class="content-text" v-html="renderContent(commentItem.content)"></div>
                <div class="reply-info">
                  <div class="release-time">
                    发布于{{ commentItem.releaseTime }}
                  </div>
                  <div class="btn like-btn" @click="doLike(LikeType.comment, commentItem.id)">
                    <template v-if="commentItem.userLikeFlag">
                      <span class="icon-like"></span>
                    </template>
                    <template v-else>
                      <i class="iconfont icon-dianzan"></i>
                    </template>
                    <span>{{ commentItem.likes != 0 ? commentItem.likes : '点赞' }}</span>
                  </div>
                  <div
                      class="btn reply-btn"
                      @click="doReply(false, {
                        commentId:commentItem.id,
                        tounickname:commentItem.unickname
                      })">
                    <i class="iconfont icon-huifu"></i><span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sub-reply-container">
            <div
                class="sub-reply-item"
                v-if="commentItem.replyList?.length"
                v-for="replyItem in (
                  commentItem.hasFlatten ?
                  commentItem.replyList.slice(ReplyPageSize*(replyPageNum-1),  ReplyPageSize+ReplyPageSize*(replyPageNum-1)):
                  commentItem.replyList.slice(0, 2)
                )"
                :key="replyItem.id">
              <div class="sub-reply-avatar">
                <div class="firstName-avatar">
                  <span>{{ replyItem.fromUnickname?.charAt(0) }}</span>
                </div>
              </div>
              <div class="content-wrap">
                <div class="nickname">
                  <span class="from">{{ replyItem.fromUnickname }}</span>
                  <span class="sep-letter">回复</span>
                  <span class="to">{{ "@" + replyItem.toUnickname }}</span>
                </div>
                <span class="reply-content">
                    <span class="content-text" v-html="renderContent(replyItem.content)"></span>
                  </span>
                <div class="reply-info">
                  <div class="release-time">
                    发布于{{ replyItem.releaseTime }}
                  </div>
                  <div class="btn like-btn" @click="doLike(LikeType.reply, replyItem.id)">
                    <template v-if="replyItem.likeFlag">
                      <span class="icon-like"></span>
                    </template>
                    <template v-else>
                      <i class="iconfont icon-dianzan"></i>
                    </template>
                    {{ replyItem.likes != 0 ? replyItem.likes : '点赞' }}
                  </div>
                  <div
                      class="btn reply-btn"
                      @click="doReply(false, {
                        commentId:commentItem.id,
                        tounickname:replyItem.fromUnickname
                      })"
                  >
                    <i class="iconfont icon-huifu"></i>回复
                  </div>
                </div>
              </div>
            </div>
            <template v-if="!commentItem.hasFlatten">
              <div
                  class="sub-reply-count"
                  v-if="commentItem.replyList?.length > 2"
                  @click="showMoreReplies(commentItem.id)"
              >
                共{{ commentItem.replyList.length }}条回复 点击查看
              </div>
            </template>
            <template v-else>

              <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="commentItem.replyList?.length"
                  :page-size="ReplyPageSize"
                  @current-change="(value)=>{
                    replyPageNum = value;
                  }"
                  class="reply-pagination"
              />
            </template>
          </div>

        </div>
      </div>
      <el-pagination
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :page-size="PageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.title-header {
  padding-left: 15px;
  margin: 10px 0;
  background-color: #def4fd;
  font-size: 18px;
  line-height: 30px;
  width: 95%;
}

.firstName-avatar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: #a5e6f1;
  border: 0.5px solid rgb(86, 85, 85);
  font-size: 25px;
  box-sizing: border-box;
  text-align: center;
}

.nickname {
  font-size: 14px;
  font-weight: 550;
  //font-family: 'SimSun';
}

.reply-wrapper {
  .wrapper-body {

  }
}

.reply-item {
  border-bottom: 1px solid #e3e5e7;
  padding-bottom: 14px;
  width: 95%;

  .reply-info {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #cfcfcf;
    justify-content: right;

    .release-time {
      margin-right: auto;
    }

    .btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }
  }

  .root-reply-container {
    padding: 22px 0 0 60px;
    position: relative;

    .root-reply-avatar {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 22px;
      left: 0;

      .firstName-avatar {
        line-height: 40px;
      }
    }

    .content-wrap {
      .reply-content {
        .content-text {
          min-height: 30px;
          line-height: 30px;
          font-size: 18px;
        }
      }
    }
  }

  .sub-reply-container {
    padding-left: 60px;

    .sub-reply-item {
      padding: 10px 0 10px 40px;
      position: relative;

      .sub-reply-avatar {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 10px;
        left: 0;

        .firstName-avatar {
          font-size: 16px;
          line-height: 30px;
        }
      }

      .content-wrap {
        .nickname {
          display: inline-flex;
          gap: 6px;
          margin-right: 15px;
          position: relative;

          &::after {
            content: '：';
            position: absolute;
            right: -15px;
            top: 0;
          }

          .to {
            color: #50a1dc;
          }
        }
      }
    }

    .sub-reply-count {
      font-size: 14px;
      color: gray;
      line-height: 25px;
      cursor: pointer;
    }
  }
}

.icon-huifu {
  font-size: 30px !important;
  color: cornflowerblue;
  margin-left: 0;
}

.icon-dianzan {
  color: red;
  font-size: 20px !important;
}

// 已点赞效果
.icon-like {
  width: 20px;
  height: 20px;
  background: url('@/assets/images/heart-fill-icon.png') no-repeat center;
  background-size: contain;
}

.icon-zhongzhi {
  color: rgb(95, 93, 93);
  font-size: 20px !important;
}
</style>
